<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>商品发布页</title>
	<link rel="stylesheet" href="css/common.css">
	<script src="js/superJquery.js"></script>
	<link rel="stylesheet" href="css/released.css">
</head>

<body>

	<div class="container">
		<h3 class="container-title">商品发布页</h3>
		<form class="form-box">
			<div>
				商品名称：
				<input type="text" class="product-name">
			</div>
			<div>
				商品分类：
				<input type="text" class="category" placeholder="服装 / 玩具 / 电子产品">
			</div>
			<div>
				商品价格：
				<input type="number" class="product-price">
			</div>
			<div>
				商品库存：
				<input type="number" class="product-number">
			</div>
			<div>
				商品类型：
				<label>
					<input type="radio" name="trademark" checked data-trademark="TM" class="trademark">
					TM</label>
				<label>
					<input type="radio" name="trademark" data-trademark="R" class="trademark">
					R</label>
			</div>
			<div>
				是否新品：
				<label>
					<input type="radio" name="isnew" checked data-isnew="新品" class="isnew">
					新品</label>
				<label>
					<input type="radio" name="isnew" data-isnew="二手" class="isnew">
					二手</label>
			</div>
			<div>
				商品描述：<br />
				<textarea name="" cols="30" rows="10" class="description"></textarea>
			</div>

			<button class="fabu" type="button">发布</button>

			<div class="tiaozhuan">
				<a href="Goods-list.html" target="_blank">商品列表页&nbsp;>&nbsp;>&nbsp;></a>
			</div>
		</form>
	</div>


	<script src="js/superJquery.js"></script>
	<script>
		/* 商品有很多个，用数组保存好 */
		var goodsList;
		if (ls.getItem("goodsList")) {
			goodsList = ls.getItem("goodsList");
		} else {
			goodsList = [];
		}

		//获取dom对象
		var $productName = $(".product-name");
		var $productPrice = $(".product-price");
		var $productNubmer = $(".product-number");
		var $trademarkArr = $(".trademark");
		var $isnewArr = $(".isnew");
		var $des = $(".description");
		var $category = $(".category");
		var $fabu = $(".fabu");


		/* 绑定发布按钮的点击事件 —— 开始 */
		function publish() {
			//获取 商标类型
			var trademark = $trademarkArr.filter(function (dom) {
				return dom.checked;
			})[0].dataset.trademark;

			// 获取是否是新品
			var isNew = $isnewArr.filter(function (dom) {
				return dom.checked;
			})[0].dataset.isnew;

			//定义商品id 自增
			var id_number = goodsList[goodsList.length - 1] ? parseInt(goodsList[goodsList.length - 1].id + 1) : 1;

			var product = {
				id: id_number,
				name: $productName.value,
				category: $category.value,
				price: parseFloat($productPrice.value),
				count: parseInt($productNubmer.value),
				trademark: trademark,
				isNew: isNew,
				des: $des.value
			}
			
			//添加到localstorage 后面
			goodsList.push(product);
			// 重置表单
			resetForm();

			ls.setItem("goodsList", goodsList);
			alert("发布成功 !");
		}



		$fabu.addEventListener("click", function(e) {
			// 阻止默认事件
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				window.e.returnValue = false;
			}
			// 判断输入框空
			if (Boolean(judgmentStrNull())) {
				publish();
			} else {
				// alert("请填写好相关信息，再提交！");
				console.log("请填写好相关信息，再提交！");
			}
			
		});
		/* 绑定发布按钮的点击事件 —— 结束 */

		//重置表单的方法 —— 发布完后重置
		function resetForm() {
			$productName.value = ""
			$category.value = "";
			$productNubmer.value = "";
			$productPrice.value = "";
			$trademarkArr[0].checked = true;
			$isnewArr[0].checked = true;
			$des.value = "";
		}


		// 判断 发布内容是否为空的 方法
		function judgmentStrNull() {
			var erroradd = 0;
			$productName.value === "" && ( erroradd++, alert("请输入商品名称 ！"));
			$category.value === "" && ( erroradd++, alert("请输入商品分类 ！"));
			$productPrice.value === "" && ( erroradd++, alert("请输入商品价格 ！"));
			$productNubmer.value === "" && ( erroradd++, alert("请输入商品库存 ！"));

			if (erroradd === 0) {
				return true;
			} else {
				return false;
			}
			
		}

	</script>

</body>

</html>